﻿import QtQuick 2.0
import QtQuick.Controls 2.14
import ClientManager 1.0
Rectangle {
    id: devicerect
    color: "lightsteelblue";
    radius : 3.9
    width: parent.width*0.6 - 20;
    height: parent.height*0.5
    signal canListen()
    signal clsListen()
    Switch{
            id:devicesw
            text: qsTr("开启设备发现")
            onClicked : {
                 if(devicesw.checked)
                 {
                     canListen()
                     //console.log("open")
                 }
                 else
                 {
                     clsListen()
                     console.log("close")
                 }
             }
            Connections{
                target: devicerect
                function onCanListen(){
                        ClientManager.onSwitchChangedClicked()
                }
            }
            Connections{
                target: devicerect
                function onClsListen(){
                        ClientManager.onSwitchClosedClicked()
                }
            }

      }

    Rectangle{
        id:header
        anchors.top: devicesw.bottom
        anchors.topMargin: 5
        anchors.left: devicerect.left
        //anchors.leftMargin: 5
        anchors.right: devicerect.right
        //anchors.rightMargin: 5
        ////////
        width: devicerect.width
        height: 30

        Row{
            spacing: 0

            Repeater{
                model: ["IP地址 端口"]

                Rectangle{
                    width: header.width
                    height: header.height
                    color: "#666666"
                    border.width: 1
                    border.color: "#848484"
                    Text {
                        text: modelData
                        anchors.centerIn: parent
                        font.pointSize: 12
                        color: "white"
                    }
                }
            }
        }
    }



    ListView{
        id:listview
        anchors.top:header.bottom
        anchors.right: devicerect.right
        anchors.left:devicerect.left
        anchors.bottom:devicerect.bottom
        clip: true
        //仅当内容太大而无法容纳时，才会显示滚动条。
        ScrollBar.vertical: ScrollBar {
            policy: ScrollBar.AsNeeded
        }
        displaced: Transition {
            NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
        }
        model:  ListModel { id: listenmodel }
        delegate: Component
        {
            id:listenDelegate
            Row{
                spacing: 10
                Rectangle {
                    width: listview.width
                    height: 32
                    radius: 2
                    border.color: "#777"
                    color: hovered ? "#559EF2FA" : "#55556677"
                    property bool hovered: false

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: parent.hovered = true;
                        onExited: parent.hovered = false;
                    }

                    Text {
                        anchors.centerIn: parent
                        text: qsTr(c_ipAddressandport)
                        font.pixelSize: 20
                    }
                }

            }

        }
    }//ListView的}
    property var temp
    Connections{
        target: ClientManager
        function onHasnewconnect(temp){
               listenmodel.append({"c_ipAddressandport": temp});
        }
    }



//  Rectangle{
//     id:staterect
//     anchors.bottom: devicerect.bottom
//     anchors.right: devicerect.right
//     anchors.left: devicerect.left
//     width: devicerect.width
//     height: devicerect.height/12
//     color: "gray"
//  }

   }//第二个rectangle的}
